import Taro, {Component} from "@tarojs/taro";
import {View, Image} from "@tarojs/components";
import {getRuntime,servicePhoneNumber} from '../../utils/common'

import './index.less'
import './about.less'

import right from "../../assets/img/right.png";
import bg_20 from "../../assets/img/bg_20.jpg";
import logo from "../../assets/img/logo.png";
import icon_92 from "../../assets/img/icon_92.png";
import jwt from "../../assets/img/jwt_code.jpg";


// 关于我们
class Personnel extends Component {
  constructor(props) {
    super(props)
  }

  state={
    isShow: false,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'关于我们' })
  }

  open() {
    this.setState({
      isShow: true
    })
  }

  close(e) {
    e.stopImmediatePropagation()
    this.setState({
      isShow: false
    })
  }

  makePhone() {
    if(servicePhoneNumber){
      getRuntime().makePhoneCall(servicePhoneNumber)
    }
  }

  // 腾讯地图连接
  handelRouter(): void {
    let key = '3PIBZ-OMGKU-ZVLVY-2QK3Z-EC2RF-D7FP4'
    let referer = '建务通-公众号'
    let url = `https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:25.092918,102.751205;title:捷浩国际控股集团;addr:昆明市盘龙区铂金大道羊肠
                 新村47栋5号别墅&key=${key}&referer=${referer}`
    window.location.href = url
  }

  link(url: string) {
    window.location.href = url
  }

  render() {
    let { isShow } =  this.state
    return (
      <View className='my-about'>
        <View className='header'>
          <Image src={bg_20} className='img-bg' />
          <Image src={logo} className='img-logo' />
        </View>

        <View className='my-from'>
          <View className='item-group'>
            <View className='line' onClick={this.link.bind(this,'http://www.jiehaojt.com/')}>
              <View className='list-title'>公司官网</View>
              <View className='list-desc'>
                http://www.jiehaojt.com
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.open.bind(this)} >
              <View className='list-title'>微信公众号</View>
              <View className='list-desc'>
                <Image src={jwt} className='img-code' />
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.makePhone.bind(this)}>
              <View className='list-title'>客服热线</View>
              <View className='list-desc'>{servicePhoneNumber}
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.makePhone.bind(this)}>
              <View className='list-title'>合作加盟</View>
              <View className='list-desc'>{servicePhoneNumber}
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this)}>
              <View className='list-title'>公司地址</View>
              <View className='list-desc'>
                <Image src={icon_92} className='img-address' />
                <View>查看</View>
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>
          </View>
        </View>

      {/*  公众号二维码*/}
      {/*className={isShow ? 'sign-success sign-show' : 'sign-success'}*/}
      <View className={isShow?'qrcode qrcode-active':'qrcode'} onClick={this.close.bind(this)}>
        <View className='content'>
          <View className='title'>建务通微信公众号</View>
          <Image className='code' src={jwt} />
          <View className='info'>微信扫一扫  关注我们</View>
        </View>
      </View>
      </View>
    )
  }
}

export default Personnel
